<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.11.0.min.js"></script>
    <script src="js/jquery-3.3.1.js"></script>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        body{
            background: linear-gradient(to right top, #65dfc9, #6cdbeb);
            display: flex;
            justify-content: center;
            align-items: center;
        }

        input{
            outline: none;
            margin: 5px;
        }
        input[type="text"],input[type="date"]{
            background: linear-gradient( to left top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.5) );
            border-radius: 5rem;
            width: 265px;
            outline: none;
            padding: 10px;
            border:2px solid rgba(142, 165, 240, 0.8)
        }
        input[type="submit"]{
            background: linear-gradient(to right top, #65dfc9, #6cdbeb);
            width: 200px;
            padding:15px 0px ;
            border-radius: 5rem;
            border: none;
            outline: none;
            transition: all 85ms linear;
        }
        input[type="submit"]:hover{
            box-shadow: 6px 6px 20px rgb(142, 165, 240, 0.8);
        }
        #resg{
            background: linear-gradient( to right bottom, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3) );
            border-radius: 2rem;
            padding: 50px;
            transition: 0.3s;
        }
        #resg:hover{
            box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
        }
    </style>
</head>
<body>
<div id="resg" class="rg_form clearfix">
    <div style="text-align: center;" class="rg_form_left">
        <h1>新用户注册</h1>
    </div>
    <div class="rg_form_center">

        <!--注册表单-->
        <form id="registerForm" action="user">
            <!--提交处理请求的标识符-->
            <input type="hidden" name="action" value="register">
            <table style="margin-top: 25px;">
                <tr>
                    <td class="td_left">
                        <label for="username">用户名</label>
                    </td>
                    <td class="td_right">
                        <input type="text" id="username" name="username" placeholder="请输入账号">
                    </td>
                </tr>
                <tr>
                    <td class="td_left">
                        <label for="password">密码</label>
                    </td>
                    <td class="td_right">
                        <input type="text" id="password" name="password" placeholder="请输入密码">
                    </td>
                </tr>
                <tr>
                    <td class="td_left">
                        <label for="email">Email</label>
                    </td>
                    <td class="td_right">
                        <input type="text" id="email" name="email" placeholder="请输入Email">
                    </td>
                </tr>
                <tr>
                    <td class="td_left">
                        <label for="name">姓名</label>
                    </td>
                    <td class="td_right">
                        <input type="text" id="name" name="name" placeholder="请输入真实姓名">
                    </td>
                </tr>
                <tr>
                    <td class="td_left">
                        <label for="telephone">手机号</label>
                    </td>
                    <td class="td_right">
                        <input type="text" id="telephone" name="telephone" placeholder="请输入您的手机号">
                    </td>
                </tr>
                <tr>
                    <td class="td_left">
                        <label for="sex">性别</label>
                    </td>
                    <td class="td_right gender">
                        <input type="radio" id="sex" name="sex" value="男" checked> 男
                        <input type="radio" name="sex" value="女"> 女
                    </td>
                </tr>
                <tr>
                    <td class="td_left">
                        <label for="birthday">出生日期</label>
                    </td>
                    <td class="td_right">

                        <input type="date" id="birthday" name="birthday" placeholder="年/月/日">
                        <p style="color: #888;font-size: 12px" >*没有选择默认为2000-1-1</p>
                    </td>
                </tr>
                <tr>
                    <td style="margin-top: 13px;display: inline-block;" class="td_left">
                        <label for="check">验证码</label>
                    </td>
                    <td class="td_right check">
                        <input type="text" id="check" name="check" class="check"><br>
                        <img style="margin-left: 21px;" src="checkCode" height="32px" alt="" onclick="changeCheckCode(this)">
                        <script type="text/javascript">
                            //图片点击事件
                            function changeCheckCode(img) {
                                img.src="checkCode?"+new Date().getTime();
                            }
                        </script>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" style="text-align: center;" class="td_right check">
                        <input type="submit"  class="submit" value="注册">
                        <span id="msg" style="color: red;"></span>
                    </td>
                </tr>
            </table>
        </form>
    </div>
    <div style="text-align: center;" class="rg_form_right">
        <p>
            已有账号？
            <a href="login.html">立即登录</a>
        </p>
    </div>
    <script>
        function checkUsername() {
            //1.获取用户名值
            var username = $("#username").val();
            //2.定义正则
            var reg_username = /^\w{3,20}$/;

            //3.判断，给出提示信息
            var flag = reg_username.test(username);
            if(flag){
                //用户名合法
                $("#username").css("border","");
            }else{
                //用户名非法,加一个红色边框
                $("#username").css("border","3px solid red");
            }

            return flag;
        }

        //校验密码
        function checkPassword() {
            //1.获取密码值
            var password = $("#password").val();
            //2.定义正则
            var reg_password = /^\w{3,20}$/;

            //3.判断，给出提示信息
            var flag = reg_password.test(password);
            if(flag){
                //密码合法
                $("#password").css("border","");
            }else{
                //密码非法,加一个红色边框
                $("#password").css("border","3px solid red");
            }

            return flag;
        }

        //校验邮箱
        function checkEmail(){
            //1.获取邮箱
            var email = $("#email").val();
            //2.定义正则		itcast@163.com
            var reg_email = /^\w+@\w+\.\w+$/;

            //3.判断
            var flag = reg_email.test(email);
            if(flag){
                $("#email").css("border","");
            }else{
                $("#email").css("border","3px solid red");
            }

            return flag;
        }

        $(function () {
            //当表单提交时，调用所有的校验方法
            $("#registerForm").submit(function(){
                //1.发送数据到服务器
                if(checkUsername() && checkPassword() && checkEmail()){
                    //校验通过,发送ajax请求，提交表单的数据   username=zhangsan&password=123

                    $.post("user/register",$(this).serialize(),function(data){
                        //处理服务器响应的数据  data  {flag:true,errorMsg:"注册失败"}

                        if(data.msg=="注册成功"){
                            //注册成功，跳转成功页面
                            alert("注册成功")
                            setTimeout(`location.href="index.html"`,500)
                        }else{
                            //注册失败,给errorMsg添加提示信息
                            alert(data.msg+"!");

                        }
                    });

                }
                //2.不让页面跳转
                return false;
                //如果这个方法没有返回值，或者返回为true，则表单提交，如果返回为false，则表单不提交
            });

            //当某一个组件失去焦点是，调用对应的校验方法
            $("#username").blur(checkUsername);
            $("#password").blur(checkPassword);
            $("#email").blur(checkEmail);


        });
    </script>
</body>
</html>